<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport"
	content="initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="${session.session_shop.name!}" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>${session.session_shop.name!}</title>
<link href="/css/common.css" type="text/css" rel="stylesheet" />
<link href="/css/index.css" type="text/css" rel="stylesheet" />
<link href="/css/icons.css" type="text/css" rel="stylesheet" />
<link href="/css/product.css" type="text/css" rel="stylesheet" />
<link href="/css/ucenter.css" type="text/css" rel="stylesheet" />
<link href="/css/add2home.css" type="text/css" rel="stylesheet" />

<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/caichong_common.js" type="text/javascript"></script>
<script src="/js/jquery.validate.min.js" type="text/javascript"></script>



<script src="/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="/js/happy.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/geo.js"></script> 


</head>
<#if addr??>
	<body onload="setup();preselect('${addr.prov}');promptinfo();">
<#else>
	<body onload="setup();preselect('广东省');promptinfo();">
</#if>
	<div id="main">

		<header class="main-header">
			<h1 ><!-- class="logo" -->
				<a href="/shop/${session.session_shop.id!}" title="${session.session_shop.name!}">${session.session_shop.name!}</a>
			</h1>
			<div class="list-head-title"> ${title!}</div>
			<div class="top-shortcuts">
				<ul>
					<li class="ucenter"><a href="/customer">用户中心</a></li>
					<li class="cates">
					<a href="/menu/categories">全部分类</a></li>
					<li class="cart" id="shoppingcart"><a href="/cart/view/${session.session_shop.id!}">购物车</a></li>
				</ul>
			</div>
		</header>

		<form name="aspnetForm" method="post"
			action="/address/save" id="aspnetForm">
			<input type="hidden" id="address" name="address"/>
			<div></div>

			<header class="ticket-header">
				<#if addr??>
					<input type="hidden" id="addressId" name="customerAddress.id" value="${(addr.id)!}" /> 
				<#else>
					<input type="hidden" id="addressId" name="customerAddress.id" value="0" /> 
				</#if>
				
				<input type="hidden" id="city" value="${(addr.city)!}" /> 
				<input type="hidden" id="area" value="${(addr.area)!}" /> 
				<input type="hidden" name="createoredit" value="1" />
				<p>
					<input type="text" id="addr-name" name="customerAddress.consignee" value="${(addr.consignee)!}"
						placeholder="姓名" />
				</p>
				<p>


					<script type="text/javascript">
						
						//这个函数是必须的，因为在geo.js里每次更改地址时会调用此函数 
						function promptinfo() 
						{ 
							var address = document.getElementById('address'); 
							var s1 = document.getElementById('s1'); 
							var s2 = document.getElementById('s2'); 
							var s3 = document.getElementById('s3'); 
							var area = document.getElementById('area').value; 
							var city = document.getElementById('city').value;
							if( city!=""){
								s2.value = city;
								change(2);
							}
							if( area!=""){
								s3.value = area;
							}
							address.value = s1.value + s2.value + s3.value; 
						} 
						
					</script>
				<div style="float: left; padding-right: 3%; padding-bottom: 10px;">
					<select id="s1" name="customerAddress.prov"
						style="width: 80px; padding-right: 0; margin-right: 0;">
					</select>
				</div>
				<div style="float: left; padding-right: 3%;">
					<select id="s2" name="customerAddress.city" 
						style="width: 80px; padding-right: 0; margin-right: 0; padding-left: 0; margin-left: 0">
						<option Value Selected="Selected">请选择</option>
					</select>
				</div>
				<div style="float: left;">
					<select id="s3" name="customerAddress.area" 
						style="width: 80px; padding-left: 0; margin-left: 0">
						<option Value Selected="Selected">请选择</option>
					</select>
				</div>

				</p>
				<p>
						<input type="text" id="addr-detail" name="customerAddress.address" value="${(addr.address)!}"
							placeholder="详细地址" />
				</p>
				<p>
					<input type="text" id="addr-phone" name="customerAddress.phone" value="${(addr.phone)!}"
					placeholder="手机号码" />
				</p>

				<p>
					<input type="submit" class="card-charge" value="新增" />
				</p>
			</header>
		</form>
		<!-- 列表 -->
		<section class="fav-list addr">
			
			<#list addrList as x>
				<dl id="dl${x.id}" style="background-color: #f8f8da;">
					<dt>${x.consignee!}</dt>
					<dd>
						<p>${x.address}</p>
						<p>${x.phone}</p>
						<p class="attr-ctrls">
						<a href="javascript:void(0);" class="del" data-id="${x.id}">删除</a> <a
							href="/address/view?id=${x.id}"
							class="edit">修改</a> 
							<#if x_index==0>
								<a href="javascript:void(0);" class="def"
								data-id="${x.id}">默认</a>
							</#if>
						</p>
					</dd>
				</dl>
			</#list>
		</section>
		<script>
			$(document).ready(function() {
				$('#aspnetForm').isHappy({
					fields : {
						// reference the field you're talking about, probably by `id`
						// but you could certainly do $('[name=name]') as well.
						'#addr-name' : {
							required : true,
							message : '请键入姓名'
						},
						'#s1' : {
							required : true,
							message : '请选择省份'
						},
						'#s2' : {
							required : true,
							message : '请选择城市'
						},
						'#s3' : {
							required : true,
							message : '请选择区域'
						},
						'#addr-detail' : {
							required : true,
							message : '请键入详细地址'
						},
						'#addr-phone' : {
							required : true,
							message : '请输入正确的联系电话',
							test : happy.USPhone
						}
					}
				});
				var id = $("input[id='addressId']").val();
				if (id != "0") {
					$(".card-charge").val("保存");
					$("#dl" + id).hide();
					//$("#s1").val("0");
					//LoadStateProvinceOptions("0");
					//LoadCityOptions("0", "0");
					//LoadCityAreaOptions("0", "0");
				}

				//$().val();
				//$().val();
				//$().val();
				//$().val();
			});
			$(".del")
					.click(
							function(e) {
								e.preventDefault();
								var id = $(this).data("id");
								if (confirm("是否确认删除？")) {
									$
											.post(
													'/address/delete?id='+id,
													function(d) {
														if (d.Msg === 'Ok') {
															window.location.href = '/address/view';
														}
													});
								}
							});
			$(".def")
					.click(
							function(e) {
								e.preventDefault();
								var id = $(this).data("id");

								$
										.post(
												'/address/edit?id='+id,
												function(d) {
													if (d.Msg === 'Ok') {
														window.location.href = '/address/view';
													}
												})

							});
		</script>


		<!--浮动按钮end-->
		<footer class="bottom">
			<div class="version">
				<span id="backtotop"><a href="javascript:void(0);"><i
						class="gray">▲</i>返回顶部</a></span>
			</div>
		</footer>

	</div>
</body>
</html>
